import React from 'react'
import ReactDOM from 'react-dom'
import {NavBar,Icon,PullToRefresh,ListView,Button,List,Tabs,Badge} from 'antd-mobile'
import axios from '../../axios/index'
import './index.less'
const Item = List.Item;
const Brief = Item.Brief;
const tabs = [
    { title: <Badge>全部</Badge> },
    { title: <Badge>收入</Badge> },
    { title: <Badge>支出</Badge> },
  ];
export default class GrowthValue extends React.Component{

    constructor(props){
        super(props);
        const dataSource = new ListView.DataSource({  //这个dataSource有cloneWithRows方法
            rowHasChanged: (row1, row2) => row1 !== row2,
          });  
          const dataSource1 = new ListView.DataSource({
            rowHasChanged: (row1, row2) => row1 !== row2,
          }); 
          const dataSource2 = new ListView.DataSource({
            rowHasChanged: (row1, row2) => row1 !== row2,
          });  
          this.rData=[]
          this.rData1=[]
          this.rData2=[]
          this.pageNo = 1
          this.pageNo1=1
          this.pageNo2=1 //定义分页信息
          this.state = {
            dataSource,
            dataSource1,
            dataSource2,
            refreshing: true,
            isLoading: true,
            refreshing1: true,
            isLoading1: true,
            refreshing2: true,
            isLoading2: true,
            height: document.documentElement.clientHeight,
            useBodyScroll: false,
            hasMore: true,
            hasMore1: true,
            hasMore2: true
          };
      
    }
    componentDidUpdate() {
        if (this.state.useBodyScroll) {
          document.body.style.overflow = 'auto';
        } else {
          document.body.style.overflow = 'hidden';
        }
    }
     componentDidMount() {
        const hei = this.state.height - ReactDOM.findDOMNode(this.lv).offsetTop-100;
        this.genData('',1).then((value)=>{
          this.rData=[...value];
          this.setState({
            dataSource: this.state.dataSource.cloneWithRows(this.rData), 
          });
        });
        this.setState({
          height: hei
        });
      }
      
      genData(type,pageNo){        
        return axios.ajax({
          url:'/api/v1/customer_service/user/accountBalanceBills',
          method:'get',
          data:{
              page:pageNo,
              type:type
          }
      }).then((res)=>{
        if(res){            
          if(res.code===0){
            this.setState({
              refreshing: false,
              isLoading: false,
            });
            let data=res.data.data;
            if(data){
              console.log('didMount:',data);
              if(data.length<=0){
                this.setState({
                  hasMore: false
                });               
              }else{
                this.setState({
                  hasMore: true
                }); 
              }
              return data;
            }else{                
            }
          }           
        }           
      });
      }

      genData1(type,pageNo){        
        return axios.ajax({
          url:'/api/v1/customer_service/user/accountBalanceBills',
          method:'get',
          data:{
              page:pageNo,
              type:type
          }
      }).then((res)=>{
        if(res){            
          if(res.code===0){
            this.setState({
              refreshing1: false,
              isLoading1: false,
            });
            let data=res.data.data;
            if(data){
              console.log('didMount:',data);
              if(data.length<=0){
                this.setState({
                  hasMore1: false
                });               
              }else{
                this.setState({
                  hasMore1: true
                }); 
              }
              return data;
            }else{                
            }
          }           
        }           
      });
      }
      genData2(type,pageNo){        
        return axios.ajax({
          url:'/api/v1/customer_service/user/accountBalanceBills',
          method:'get',
          data:{
              page:pageNo,
              type:type
          }
      }).then((res)=>{
        if(res){            
          if(res.code===0){
            this.setState({
              refreshing2: false,
              isLoading2: false,
            });
            let data=res.data.data;
            if(data){
              console.log('didMount:',data);
              if(data.length<=0){
                this.setState({
                  hasMore2: false
                });               
              }else{
                this.setState({
                  hasMore2: true
                }); 
              }
              return data;
            }else{                
            }
          }           
        }           
      });
      }
      onRefresh = (type,pageNo) => {
          this.pageNo = 1
          this.pageNo1=1
          this.pageNo2=1 //定义分页信息
        if(type==1){
          this.setState({ refreshing1: true, isLoading1: true,hasMore1:true });
          this.genData1(1,1).then((value)=>{
            this.rData1=[...value];
            this.setState({
              dataSource1: this.state.dataSource.cloneWithRows(this.rData1), 
            });
          });
        }else if(type==2){
          this.setState({ refreshing2: true, isLoading2: true ,hasMore2:true});
          this.genData2(2,1).then((value)=>{
            this.rData2=[...value];
            this.setState({
              dataSource2: this.state.dataSource.cloneWithRows(this.rData2), 
            });
          });
        }else{
          this.setState({ refreshing: true, isLoading: true ,hasMore:true});
          this.genData('',1).then((value)=>{
            this.rData=[...value];
            this.setState({
              dataSource: this.state.dataSource.cloneWithRows(this.rData), 
            });
          });
        }
      };
      onEndReached =(type,pageNo) => {        
        //如果this.state.hasMore为false，说明没数据了，直接返回   
        if(type==1){
          if (!this.state.hasMore1) {
            console.log('到达底部没有数据了');
            return;
          }   
          this.setState({ refreshing1: true, isLoading1: true });
          this.genData1(type,pageNo).then((value)=>{
            this.rData1.push(...value);
            this.setState({
              dataSource1: this.state.dataSource.cloneWithRows(this.rData1), 
            });
          });
        }else if(type==2){
          if (!this.state.hasMore2) {
            console.log('到达底部没有数据了');
            return;
          }   
          this.setState({ refreshing2: true, isLoading2: true });
          this.genData2(type,pageNo).then((value)=>{
            this.rData2.push(...value);
            this.setState({
              dataSource2: this.state.dataSource.cloneWithRows(this.rData2), 
            });
          });
        }else{
          if (!this.state.hasMore) {
            console.log('到达底部没有数据了');
            return;
          } 
          this.setState({ refreshing: true, isLoading: true });
          this.genData(type,pageNo).then((value)=>{
            this.rData.push(...value);
            this.setState({
              dataSource: this.state.dataSource.cloneWithRows(this.rData), 
            });
          });
        }     
        
       
      };
    
    render(){
    //这里就是个渲染数据，rowData就是每次过来的那一批数据，已经自动给你遍历好了，rouID可以作为key值使用，直接渲染数据即可
    const row = (rowData, sectionID, rowID) => {
        return (
          <List renderHeader={() => ''} className="my-list">
            <Item multipleLine 
              extra={
                <span style={{color:rowData.amount>0?'#FF9800':'#8BC34A'}}>{rowData.amount>0?('+'+rowData.amount):('-'+rowData.amount)}</span>
                }>
              <span style={{fontSize:'14px'}}>{ rowData.mark}</span>
              <Brief> <span>{rowData.updated_at}</span></Brief>
            </Item>
          </List>
        );
    };

        return(
            <div>
                <NavBar
                    mode="light"
                    leftContent="返回"
                    icon={<Icon type="left" />}
                    onLeftClick={() =>{
                        const {history}=this.props;
                        history.push({pathname:'/mine'});
                    }}
                    rightContent={[
                        <Icon key="1" type="ellipsis" />,
                    ]}
                >充值记录</NavBar>
                <Tabs tabs={tabs}
                    initialPage={0}
                    onChange={(tab, index) => { 
                      // console.log('onChange', index, tab);
                      if(index===0){
                        this.setState({
                          isLoading:!this.state.isLoading,
                          refreshing:!this.state.refreshing
                        });
                        this.pageNo=1
                          this.genData('',this.pageNo).then((value)=>{
                            this.rData=[...value];
                            this.setState({
                              dataSource: this.state.dataSource.cloneWithRows(this.rData), 
                            });
                          });
                      }else if(index===1){
                        this.setState({
                          isLoading1:!this.state.isLoading1,
                          refreshing1:!this.state.refreshing1
                        });
                        this.pageNo1=1
                          this.genData1(1,this.pageNo1).then((value)=>{
                            this.rData1=[...value];
                            this.setState({
                              dataSource1: this.state.dataSource.cloneWithRows(this.rData1), 
                            });
                          });
                      }else if(index===2){
                        this.setState({
                          refreshing2: !this.state.refreshing2,
                          isLoading2: !this.state.isLoading2,
                        });
                        this.pageNo2=1
                        this.genData2(2,this.pageNo2).then((value)=>{
                          this.rData2=[...value];
                          this.setState({
                            dataSource2: this.state.dataSource.cloneWithRows(this.rData2), 
                          });
                        });
                      }
                  }}
                    onTabClick={(tab, index) => { 
                      // // console.log('onTabClick', index, tab); 
                      // if(index===1){
                      //   console.log('第二个tab');
                      //   this.genData(1,1);
                      // }else if(index===2){
                      //   console.log('第三个tab');
                      //   this.genData(2,1);
                      // }
                    }}
                    >
                    <ListView
                      key={this.state.useBodyScroll ? '0' : '1'}
                      ref={el => this.lv = el}
                      dataSource={this.state.dataSource}
                      renderFooter={    //renderFooter就是下拉时候的loading效果，这里的内容可以自己随需求更改
                        () => (
                              <div style={{ padding: 30, textAlign: 'center' }}>
                                {this.state.isLoading ? '加载中...' : (this.state.hasMore?'加载完成':'没有更多数据了')}
                              </div>
                            )
                      }
                      renderRow={row}   //渲染你上边写好的那个row
                      useBodyScroll={this.state.useBodyScroll}
                      style={this.state.useBodyScroll ? {} : {
                        height: this.state.height
                      }}
                      pullToRefresh={<PullToRefresh
                        refreshing={this.state.refreshing}
                        onRefresh={()=>{this.onRefresh('',1)}}
                      />}
                      onEndReached={()=>{this.onEndReached('',++this.pageNo)}}
                      onEndReachedThreshold={30}
                      pageSize={15}    //每次下拉之后显示的数据条数
                    />

            
                    <ListView
                      key={this.state.useBodyScroll ? '0' : '1'}
                      ref={el => this.lv = el}
                      dataSource={this.state.dataSource1}
                      renderFooter={    //renderFooter就是下拉时候的loading效果，这里的内容可以自己随需求更改
                        () => (
                              <div style={{ padding: 30, textAlign: 'center' }}>
                                {this.state.isLoading1 ? '加载中...' : (this.state.hasMore1?'加载完成':'没有更多数据了')}
                              </div>
                            )
                      }
                      renderRow={row}   //渲染你上边写好的那个row
                      useBodyScroll={this.state.useBodyScroll}
                      style={this.state.useBodyScroll ? {} : {
                        height: this.state.height
                      }}
                      pullToRefresh={<PullToRefresh
                        refreshing={this.state.refreshing1}
                        onRefresh={()=>{this.onRefresh(1,1)}}
                      />}
                      onEndReached={()=>{this.onEndReached(1,++this.pageNo1)}}
                      onEndReachedThreshold={30}
                      pageSize={15}    //每次下拉之后显示的数据条数
                    />


                    <ListView
                      key={this.state.useBodyScroll ? '0' : '1'}
                      ref={el => this.lv = el}
                      dataSource={this.state.dataSource2}
                      renderFooter={    //renderFooter就是下拉时候的loading效果，这里的内容可以自己随需求更改
                        () => (
                              <div style={{ paddingTop: '30px', textAlign: 'center' }}>
                                {this.state.isLoading2 ? '加载中...' : (this.state.hasMore2?'加载完成':'没有更多数据了')}
                              </div>
                            )
                      }
                      renderRow={row}   //渲染你上边写好的那个row
                      useBodyScroll={this.state.useBodyScroll}
                      style={this.state.useBodyScroll ? {} : {
                        height: this.state.height
                      }}
                      pullToRefresh={<PullToRefresh
                        refreshing={this.state.refreshing2}
                        onRefresh={()=>{this.onRefresh(2,1)}}
                      />}
                      onEndReached={()=>{this.onEndReached(2,++this.pageNo2)}}
                      onEndReachedThreshold={30}
                      pageSize={15}    //每次下拉之后显示的数据条数
                    />           
            
            </Tabs>
            </div>
            
        );
    }
}